<template>
  <el-drawer
    v-model="drawer"
    :with-header="false"
    @close="handleClose"
    size="25%"
  >
    <span>当前选择数据:<br /></span>
    <span>{{ selectedData }}</span>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits } from "vue";

const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true,
  },
  selectedData: {
    type: String,
    required: true,
  },
});

const emits = defineEmits(["update:isOpen"]);

const drawer = ref(props.isOpen);

watch(
  () => props.isOpen,
  (newVal) => {
    drawer.value = newVal;
  }
);

const handleClose = () => {
  emits("update:isOpen", false);
};
</script>
